<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Wallet Baristas</title>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

  <script type="text/javascript"
        language="javascript"
        src="{{js_url}}">
  </script>

<script type="text/javascript"
        language="javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<script type='text/javascript'>

// Handle wallet failure case
function failureFullWallet(error, detail) {
    log('--------------------------');
    log("There was an error getting the full wallet: " + error + "\n" + detail);
}

// Logging for demonstration purposes
function log(msg) {
  if (console && console.log) {
    console.log(msg);
  }
}

//////////////////////////////////////////////////////////////////////
// Wallet control
//////////////////////////////////////////////////////////////////////

function successMaskedWallet(jwt) {
  log('--------------------------');
  log("Handling the masked wallet.");
  log(jwt);

  // populate the hidden form field with the masked wallet contents
  $("#maskedWalletJWT").val(jwt);

  // submit the form
  document.forms["updateCredentials"].submit();
}

function failureMaskedWallet(error, detail) {
    log('--------------------------');
    log("There was an error getting the masked wallet: " + error + "\n" + detail);
}

</script>

</head>
<body>
  <div id="header">
    <h1>Wallet Baristas</h1>
  </div>
  
  <form id="purchaseConfirmForm" name="purchaseConfirmForm" 
        action="/receipt"
        method="post"
        onSubmit="return goog.wallet.requestFullWallet(&quot;{{full_wallet_request_jwt}}&quot;, &quot;fullWalletJWT&quot;, failureFullWallet);">

  <input type="hidden" name="orderDescription" id="orderDescription" value="{{order_description}}"> 
  <input type="hidden" name="formTotal" id="formTotal" value="{{total_price}}"> 
  <input type="hidden" name="fullWalletRequestJWT" id="fullWalletRequestJWT" value="{{full_wallet_request_jwt}}"> 
  <input type="hidden" name="fullWalletJWT" id="fullWalletJWT"> 

  <div id="finish_order">
  	<h2>Order Details</h2>
    <div id="formatBar">
      <table>
      	<tr>
      	  <td>
            <div class="offset"><strong>Order: </strong>{{order_description}}</div>
            <div class="offset"><strong>Total: $</strong>{{total_price}}</div>
      	  </td>
      	</tr>
      </table>
      
      <!-- orderDescription and fullWalletRequestJWT below are only used to communicate state back to the server.
           A real implementation will not need to use this technique and will only need the fullWalletJWT input. -->
      <div class="offset"><input type="submit" value="Finish & Pay"></div>
    </div>
    
    <h2>Payment Details</h2>
    <h4>Card Details</h4>
    <div id="formatBar">
      <div class="offset"><b>name: </b>{{payment_instrument.billing_address.name}}</div>
      <div class="offset"><b>card name: </b>{{payment_instrument.descriptive_name}}</div>
      <div class="offset"><b>type: </b>{{payment_instrument.type}}</div>
      <div class="offset"><b>last 4 digits: </b>{{payment_instrument.last_four_digits}}</div>
      <div class="offset"><b>expiration: </b>{{payment_instrument.expiration_month}}/{{payment_instrument.expiration_year}}</div>
    </div>
    <h4>Billing Address</h4>
    <div id="formatBar">
      <div class="offset"><b>company: </b>{{payment_instrument.billing_address.company_name}}</div>
      <div class="offset"><b>address1: </b>{{payment_instrument.billing_address.address1}}</div>
      <div class="offset"><b>address2: </b>{{payment_instrument.billing_address.address2}}</div>
      <div class="offset"><b>city: </b>{{payment_instrument.billing_address.city}}</div>
      <div class="offset"><b>state: </b>{{payment_instrument.billing_address.state}}</div>
      <div class="offset"><b>postal code: </b>{{payment_instrument.billing_address.postal_code}}</div>
      <div class="offset"><b>country: </b>{{payment_instrument.billing_address.country_code}}</div>
      <div class="offset"><b>phone #: </b>{{payment_instrument.billing_address.phone_number}}</div>
    </div>
    <h4>Shipping Address</h4>
    <div id="formatBar">
      <div class="offset"><b>company: </b>{{shipping_address.company_name}}</div>
      <div class="offset"><b>address1: </b>{{shipping_address.address1}}</div>
      <div class="offset"><b>address2: </b>{{shipping_address.address2}}</div>
      <div class="offset"><b>city: </b>{{shipping_address.city}}</div>
      <div class="offset"><b>state: </b>{{shipping_address.state}}</div>
      <div class="offset"><b>postal code: </b>{{shipping_address.postal_code}}</div>
      <div class="offset"><b>country: </b>{{shipping_address.country_code}}</div>
      <div class="offset"><b>phone #: </b>{{shipping_address.phone_number}}</div>
      <br />
      <div class="offset"><g:wallet jwt="{{masked_wallet_request_jwt}}" mode="change" onSuccess="successMaskedWallet(jwt)" 
      onFailure="failureMaskedWallet(error, detail)"></g:wallet></div>

  </div>
  </form>
  
  <form id="updateCredentials" name="updateCredentials" action="confirm" method="post">
    <input type="hidden" name="drink" id="drink" value="{{order_description}}" />
    <input type="hidden" name="formTotal" id="formTotal" value="{{total_price}}" />
    <input type="hidden" name="maskedWalletJWT" id="maskedWalletJWT" value="">
  </form>
</body>
</html>
